<template>
  <div class="app-container">
    <el-row>
      <el-col :span="15" class="table">
        <el-table :data="tableData" border style=" width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="date" label="指标" width="180">
          </el-table-column>
          <el-table-column prop="level" sortable label="等级" width="180">
          </el-table-column>
          <el-table-column prop="name" label="内容描述" width="180">
          </el-table-column>
          <el-table-column prop="time" :formatter="showDept" sortable label="响应时间(ms)">
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="8" class="box">
        <div class="rating">
          <input type="radio" name="star" id="star1">
          <!-- for绑定对应ID -->
          <label for="star1">
            <img src="./img/sad.png" alt="">
            <h4>等的花儿都谢了</h4>
          </label>
          <input type="radio" name="star" id="star3" checked='checked'>
          <label for="star3">
            <img src="./img/nerd.png" alt="">
            <h4>非常流畅</h4>
          </label>
          <!-- 默认选择的表情 -->
          <input type="radio" name="star" id="star2">
          <label for="star2">
            <img src="./img/pressure.png" alt="">
            <h4>有点不行哦</h4>
          </label>
          <h2 class=" text">
            <el-avatar :size="25" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            player comment
          </h2>
        </div>
      </el-col>
    </el-row>



    <el-row>
      <el-col :span="8">
        <div class="pageRating">页面性能评分</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" class="Process-box">
        <el-col :span="2" class="ProcessLabel">

          <div class="grid-content bg-purple" id="firstFP">FP</div>
        </el-col>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="70" class="processGap">FCP</el-progress>
        <el-col :span="2" class="ProcessLabel">
          <div class="grid-content bg-purple">LCP</div>
        </el-col>
        <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" class="processGap">
        </el-progress>
        <el-col :span="2" class="ProcessLabel">
          <div class="grid-content bg-purple">FID</div>
        </el-col>
        <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning" class="processGap">
        </el-progress>
        <el-col :span="2" class="ProcessLabel">
          <div class="grid-content bg-purple">CLS</div>
        </el-col>
        <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" class="processGap">
        </el-progress>
      </el-col>
      <el-col :span="13" class="Process-box2">
        <div class="table-box">
          <table class="table-dec">
            <H3>用户信息</H3>
            <tr>
              <td>
                <div><span>url：</span><span>http://127.0.0.1:5501/monitor-main/public/lighthouse.html</span></div>
              </td>

              <td>
                <div><span>浏览器：</span><span>Microsoft Edge104.0.1293.54 </span></div>
              </td>

            </tr>
            <tr>
              <td>
                <div><span>备注：</span>
                  <el-tag size="small">Normal</el-tag>
                </div>
              </td>
              <td>
                <div><span>联系地址:</span><span>厦门市湖滨北路</span></div>
              </td>
            </tr>
          </table>
        </div>
      </el-col>
    </el-row>

  </div>


</template>
<style>
/* 控制整体盒子样式 */
.app-container {
  padding: 20px 20px 0px 20px;
}

.table-box {


  width: 820px;
  padding: 20px 0px 20px 20px;

}

.table-dec {
  font-size: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  ;

}

tr .title {
  color: rgb(48, 49, 51);
  font-size: 50px;
  font-weight: 700px;

}

.table-dec tr {
  color: rgb(96, 98, 102);
  font-size: 14px;
  font-weight: 400;
}

.table-box td {
  width: 500px;
  height: 30px;

}

/* 右侧表情盒子 */
.box {
  display: flex;
  background: #e5e9f2;
  justify-content: center;
  /* 主轴对齐方式*/
  align-items: center;
  /* 交叉轴对齐方式 */
  min-height: 45vh;
  /* 阴影高度 */
  box-shadow: 0px 0px 5px #888888;
}

.box .rating {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  /* 弹性盒布局方向: 反向行 */

}

.box .rating input {
  display: none;
  /* 隐藏 */
}

.box .rating label {
  position: relative;
  width: 0;
  /* 宽度 */
  height: 128px;
  cursor: pointer;
  /* 鼠标样式 */
  transition: 0.5s;
  filter: grayscale(1);
  /* 灰阶过渡 */
  text-align: center;
  /* 字体水平居中 */
  opacity: 0;
  /* 透明度 */
}

.box .rating:hover label {
  width: 160px;
  opacity: 0.2;
}

.box .rating input:hover+label,
.box .rating input:checked+label {
  /* 悬停和选择时进行触发 */
  /* 通过修改灰阶和透明度进行显示 */
  filter: grayscale(0);
  opacity: 1;
  width: 160px;
}

.box img {
  height: 100%;
}

/* 图标下字体 */
.box .rating label h4 {
  color: #000;
  font-size: 24px;
  /* 字体大小 */
  padding-top: 10px;
  font-weight: 500;
  /* 字体维度 */
  white-space: nowrap;
  /* 不换行 */
  opacity: 0;
  transform: translateY(-50px) scale(0);
  /* Y轴移动，放大 */
  transition: 0.5s;
}

.box .rating input:hover+label h4,
.box .rating input:checked+label h4 {
  opacity: 1;
  transform: translateY(0px) scale(1);
}

/* 标题 */
.box .text {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  color: #0f0202;
  width: 500px;
  font-weight: 700;
  letter-spacing: 2px;
  /* 字体间距 */
  text-align: center;
}


/* 整体样式 */
/* 表格和表情空隙位置 */
.table {
  margin-right: 20px;
  margin-bottom: 30px;
}

/* 行样式 */
.el-row {
  margin-bottom: 10px;
  /* box-shadow: 0px 0px 5px #888888; */
}

/* 列样式 */
.el-col {
  border-radius: 4px;

  /* box-shadow: 0px 0px 5px #888888; */
}

/* 表格颜色 */
/* .el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #b0d1f1;
} */

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/* 设置下部进度条标签样式 */
.Process-box {
  background-color: #e5e9f2;
  box-shadow: 0px 0px 5px #888888;
}

.Process-box2 {
  background-color: #e5e9f2;
  /* 控制表格高度 */
  margin-top: 60px;
  margin-left: 50px;
  box-shadow: 0px 0px 5px #888888;
}

.ProcessLabel {
  border-radius: 50px;
  margin-left: 10px;
  width: 50px;
  margin-bottom: 4px;
}

.grid-content {
  border-radius: 50px;
  text-align: center;
  /* background-color: rgb(235, 238, 245); */
  background: white;

}

.processGap {
  margin-bottom: 10px;
  margin-right: 20px;
}

.pageRating {
  color: #909399;
  font-size: 20px;
  /* 字体大小 */
  padding-top: 10px;
  font-weight: 500;

}

#firstFP {
  margin-top: 10px;
}
</style>
<script>
import { getList } from '@/api/table'

export default {

  methods: {
    tableRowClassName({ row, rowIndex }) {
      // if (rowIndex === 1) {
      //   return 'warning-row';
      // } else if (rowIndex === 3) {
      return 'success-row';
      // }
      // return '';
    },
    function(percentage) {

    },
    showDept(row, column, cellValue, index) {
      // console.log(row);
      // console.log(column);
      // console.log(cellValue);
      // console.log(index);
      var a = 0;
      var b = 0;
      var c = 0;
      var d = 0;
      var e = 0;

      switch (index) {
        case 0:
          console.log("我是第一行，嘿嘿");
          // rowIndex='success-row';

          a = cellValue;
          console.log("a=" + a);
          break;
        case 1:
          console.log("我是第二行，嘿嘿");
          b = cellValue;
          console.log("b=" + b);
          break;
        case 2:
          console.log("我是第三行，嘿嘿");
          c = cellValue;
          console.log("c=" + c);
          break;
        case 3:
          console.log("我是第四行，嘿嘿");
          d = cellValue;
          console.log("d=" + d);
          break;
        case 4:
          console.log("我是第五行，嘿嘿");
          e = cellValue;
          console.log("e=" + e);
          break;
      }
      if (a>0){
        

      }
      // console.log(a);
      // console.log(b);
      // console.log(c);
      // console.log(d);
      // console.log(e);

      return cellValue;

    }
  },
  data() {
    return {

      tableData: [{
        date: 'FP',
        level: 'Good',
        name: "渲染出第一个像素点",
        time: '30.599999994039536'
      }, {
        date: 'FCP',
        level: 'Good',
        name: "渲染出第一个内容",
        time: '30.599999994039536'
      }, {
        date: 'LCP',
        level: 'Good',
        name: "最大内容渲染时间",
        time: '17.899'
      }, {
        date: 'FID',
        level: 'Good',
        name: "用户和页面进行首次交互操作",
        time: '3.9000000059604645'
      }, {
        date: 'CLS',
        level: 'Good',
        name: "用户和页面进行首次交互操作",
        time: '0.000144590283945624'
      }]

    }

  }

}


</script>


